<template>
  <div>
    <!-- 商品详情-->
    <div class="xiangqing">
        <span id="jiantou" class="iconfont icon-arrow-left"></span>
        <span class="shangpin">商品详情</span>
        <span id="sandian" class="iconfont icon-xuyuanchi"></span>
    </div>
    <!-- 图片 -->
    <div class="picture">
        <img src="53.jpg" alt="">
    </div>
    <!-- jieshao -->
    <div class="jieshao">
        <div class="xing">星之守护者迦娜(7天)</div>
        <div class="ju"><b>20</b>聚豆</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.xiangqing{
    width: 100%;
    height: 0.3rem;
    /* background-color: bisque; */
    position: relative;

}
#jiantou{
    width: 15%;
    height: 00.3rem;
    line-height: 00.3rem;
    font-size: .16rem;
    font-weight: 600;
    position: absolute;
}
.shangpin{
    width: 20%;
    height: 00.3rem;
    line-height: 00.3rem;
    font-size: .2rem;
    font-weight: 700;
    margin-left: 1.1rem;
}
#sandian{
      width: 20%;
    height: 00.3rem;
    line-height: 00.3rem;
    font-size: .2rem;
    font-weight: 700;
    margin-left: 1.3rem;
}
.picture{
    width: 100%;
    height: 2rem;
}
.picture img{
    width: 100%;
    height: 2rem;
}
.jieshao{
    margin-top: 0.15rem;
    width: 100%;
    height: 00.5rem;
    /* background-color: aquamarine; */
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid darkgrey;
}
.xing{
    width: 100%;
    height: 00.3rem;
    /* background-color: chocolate; */
    font-size: .2rem;
    font-weight: 500;
    /* margin-left: 00.3rem; */
}
.ju{
    width: 100%;
    height: 0.2rem;
    /* background-color: chartreuse; */
    /* margin-left: 00.3rem; */
}
b{
    color: coral;
    font-size: .14rem;
}
</style>